<template>
  <div class="search-page">
    <BasicForm @register="registerForm" @submit="handleSubmit" />
    <BasicTable @register="registerTable">
      <template #progress="{ record }">
        <a-progress type="circle" :percent="parseFloat(record.collectProgress.replace('%', ''))" :format="(percent) => `${percent}%`" :size="50" />
      </template>
      <template #residue="{ record }">
        <span class="dangerColor">1</span>
      </template>
      <template #notFilled="{ record }">
        <span class="dangerColor">1</span>
      </template>
      <template #back="{ record }">
        <span class="dangerColor">1</span>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { BasicForm, useForm } from '@/components/Form';
  import { BasicTable, useTable, TableAction, ActionItem } from '@/components/Table';
  import { searchFormSchema, columns } from './search.data';
  import { useRouter } from 'vue-router';
  import {getListByMonth, getListByYear} from "@/views/bi/collect/search/index.api";
  const router = useRouter();
  // 注册表单
  const [registerForm, { setFieldsValue }] = useForm({
    schemas: searchFormSchema,
    showSubmitButton: true,
    showResetButton: true,
  });
  console.log(columns)
  setTimeout(() =>{
    // setFieldsValue({
    //   taskName: '默认任务名',
    //   // date: ['2024-01-01', '2024-01-31'],
    // });
  },500)
  // 注册表格
  const [registerTable,  { reload }] = useTable({
    api: (params) => {
      return getListByMonth({
        ...params,
        ruleId: '1905612707478179842',
        year: 2025,
        startMonth: 1,
        endMonth: 12,
      })},
    columns: columns,
    bordered: false,
    rowKey: 'id',
    pagination: {
      size: 20,
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',

    },
  });

  // 表单提交
  function handleSubmit(values: any) {
    console.log('搜索参数：', values);
  }

  /**
   * 查看详细信息
   * @param record
   */

  function handleCheckInfo(record) {
    //TODO : 查看信息
    console.log('查看详细信息', record);
    router.push({
      path: '/bi/collect/search/detail',
      query: {
        id: record.id,
      }
    })
  }
  /**
   * 操作栏
   */

  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '查看详细信息',
        onClick: handleCheckInfo.bind(null, record),
      }
    ]
  }
</script>

<style scoped lang="less">
  .search-page {
    padding: 16px;
    background-color: #fff;
  }
  :deep(.ant-picker) {
    width: 100%;
  }
  .dangerColor{
    color: #ff4d4f;
  }
</style>
